<template>
    <div class="listDiv">
        <div class="searchDiv">
            <DateRange v-model:start="obj.req.intime_start" v-model:end="obj.req.intime_end" sph="注册时间" />
            <el-select v-model="obj.req.state" placeholder="全部状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.stateTypeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="">昵称</li>
                <li class="wcen">头像</li>
                <li class="mw200 wcen">注册时间</li>
                <li class="mw200 wcen">最后登录时间</li>
                <li class="wcen">状态</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="">{{x.name}}</li>
                    <li class="wcen">
                        <el-image  style="width: 40px; height: 40px" class="ml5" fit="cover" :preview-src-list="[x.head]" :src="x.head">
                            <template #error>
                                <div class="image-slot">
                                    <el-image  fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                                </div>
                            </template>
                        </el-image>
                    </li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="mw200 wcen">{{x.lastlogintime}}</li>
                    <li class="wcen">
                        <div :class="[globalData.stateTypeAry[x.state].label]">{{globalData.stateTypeAry[x.state].text}}</div>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import DateRange from '../../../components/date_range.vue'
    import Pager from '../../../components/pager.vue'
    import DelConfirm from '../../../components/del_confirm.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary: [
            {id:1,name:"穿山乙",intime:"2020-03-06 11:23:33",lastlogintime:"2020-03-10 09:33:21",state:"1"}
        ],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            intime_start:"",
            intime_end:"",
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/mp_persionList',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let setstate = x => {
        // proxy.$ajax({
        //     url: '//setstate',
        //     data: { id: x.id},
        //     bfLoading: true
        // }).then(d => {
        //     if(d.success){
        //         proxy.elMessageMixin("状态变更成功", 'success')
        //         init()
        //     }else{
        //         proxy.elMessageMixin(d.err, 'error')
        //     }
        // }).catch(() => { })
    }
</script>

<style scoped>
    .search_select { margin-left: 10px; width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 45px; }
    /*
    1<li>名称</li>
    2<li>行业</li>
    3<li>客户量</li>
    4<li>视频量</li>
    5<li>添加时间</li>
    6<li>到期时间</li>
    7<li>状态</li>
    8<li>操作</li>*/
</style>